﻿<template>
  <div class="container" style="width:99%;margin-top:-25px;">
    <!-- 查询条件 -->
    <div class="query-box">
      <el-form :model="queryBox" status-icon ref="queryBox">
        <el-row>
          <el-col :span="4"> </el-col>
          <el-col :span="4">
            <div class="depart-box">
              <div class="slect-title">客户来源</div>
              <el-select
                filterable
                clearable
                v-model="queryBox.customerSource"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in student_data_from_options"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                  >{{ item.value }}</el-option
                >
              </el-select>
            </div>
          </el-col>

          <el-col :span="4">
            <el-form-item label>
              <el-input
                v-model="queryBox.customerName"
                placeholder="客户名称"
              >
                <template slot="prepend">客户名称</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label >
              <el-input v-model="queryBox.contactPhone" placeholder="联系电话">
                <template slot="prepend">联系电话</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label >
              <div class="depart-box">
                <div class="slect-title">设备</div>
                <el-select
                  filterable
                  clearable
                  v-model="queryBox.equipment"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in equipment_options"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key"
                    >{{ item.value }}</el-option
                  >
                </el-select>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label >
              <el-input v-model="queryBox.theme" placeholder="分主题">
                <template slot="prepend">分主题</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item label>
              <div class="depart-box">
                <div class="slect-title">同步状态</div>
                <el-select
                  filterable
                  clearable
                  v-model="queryBox.pushStatus"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in pushState_options"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key"
                    >{{ item.value }}</el-option
                  >
                </el-select>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label>
              <el-input
                v-model="queryBox.pageUrl"
                placeholder="页面地址"
              >
                <template slot="prepend">页面地址</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
              <div class="depart-box">
                <div class="slect-title">所在地区</div>
                <el-form-item label prop="area" style="width:100%">
                  <el-cascader
                    clearable
                    size="large"
                    :options="options"
                    v-model="selectedOptions"
                    style="width:100%"
                  ></el-cascader>
                  </el-form-item>  
              </div>  
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">
            <div class="depart-box">
              <div class="slect-title">创建时间</div>
              <el-date-picker
                v-model="createDate"
                type="daterange"
                :start-placeholder="'开始时间'"
                :end-placeholder="'结束时间'"
                range-separator="至"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div class="from-btns">
        <kt-button
          :label="$t('action.reset')"
          perms="true"
          type="primary"
          @click="reset('queryBox')"
        />
        <kt-button
          :label="$t('action.search')"
          perms="true"
          type="primary"
          @click="search"
        />
      </div>
    </div>


    <!--表格内容栏-->
    <Crm-table
      class="table-width"
      PromoteAgent
      width="400"
      :showBatchDelete="false"
      permsBind="ResourceCollectionPool:PromoteAgent:Synchronous"
      :data="pageResult"
      :columns="columns"
      :loading="loading"
      @handleReceive="handleReceive"
      @findPage="findPage"
    ></Crm-table>
  </div>
</template>
<script>
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";
import { regionDataPlus } from "element-china-area-data";
import { CodeToText } from "element-china-area-data";
import { baseUrl } from "@/utils/global";
import axios from "axios";
import Cookies from "js-cookie";
export default {
  name: "PromoteAgent",
  components: {
    CrmTable,
    KtButton,
  },
  data() {
    return {
      aa: true,
      loading:false,
      checkedPeson: 0,
      size: "small",
      // filters: {
      //   name: ""
      // },
      // 查询条件
      student_data_from_options: [
        {
          label: " ",
          key: " "
        }
      ],
      student_type_options: [],
      student_progress_options: [
        {
          label: " ",
          key: " "
        }
      ],
      student_data_from_type_options: [
        {
          label: " ",
          key: " "
        }
      ],
      queryBox: {
        customerSource:'',
        customerName:'',
        contactPhone:'',
        diqu:'',
        device:'',
        pushStatus:'',
        theme:''
      },
      //   地区
      options: regionDataPlus,
      selectedOptions: [],
      width: 200,
      columns: [
        { type: "index", label: "序号", minWidth: 50 },
        { prop: "customerSource", label: "客户来源", minWidth: 80 },
        { prop: "customerName", label: "客户名称", minWidth: 100 },
        { prop: "contactPhone", label: "联系电话", minWidth: 100 },
        { prop: "diqu", label: "地区", minWidth:150 },
        { prop: "deviceStr", label: "设备", minWidth: 50 },
        { prop: "pageUrl", label: "页面地址", minWidth: 80 },
        { prop: "theme", label: "分主题", minWidth: 180 },
        { prop: "createDate", label: "创建时间", minWidth: 120 },
        { prop: "pushStatusStr", label: "同步状态", minWidth: 100 },
        { prop: "pushMsg", label: "同步状态说明", minWidth: 200 },
      ],
      assigner: "",
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {
        content: []
      },
      student_type_options: [],
      operation: true, // true:新增, false:编辑
      batchdistribution: false, //显示批量分配弹窗
      customerownership: false, //显示客户归属弹窗
      selectionsLength: "",
      deptTreeProps: {
        label: "name",
        children: "children"
      },
      roles: [],
      selections: [], //选中列表集合
      ids: [], //分配ID集合
      ids2: [],
      equipment_options:[
        {
          value: "PC",
          key: "1"
        },
        {
          value: "移动",
          key: "2"
        }
      ],
      pushState_options:[
        {
          value: "未同步",
          key: "1"
        },
        {
          value: "同步成功",
          key: "2"
        },
        {
          value: "同步失败",
          key: "3"
        }
      ],
      school_option:[],
      grade_options:[],
      subject_options:[],
      SF_options:[],
      createDate:[]
    };
  },
  methods: {
    // 搜索
    search() {
      this.loading = true;
      this.pageRequest.pageNum = 1;
      this.queryBox.province = this.selectedOptions[0];
      this.queryBox.city = this.selectedOptions[1];
      this.queryBox.area = this.selectedOptions[2];
      this.queryBox.startCreateDate=this.createDate[0]
      this.queryBox.endCreateDate=this.createDate[1]
      this.findPage(null);
    },
    // 获取下拉
    findDownList(){
      // 获取学校
      this.$api.oem.schoolList().then(res =>{
        this.school_option=res.data
      }),
      // 客户来源
      this.student_data_from_options = JSON.parse(
        localStorage.getItem("investmentSource")
      );
      // 年级
      this.grade_options = JSON.parse(
        localStorage.getItem("gradeCache")
      );
      //学科
      this.subject_options= JSON.parse(
        localStorage.getItem("studentSubject")
      );
      this.SF_options = JSON.parse(
        localStorage.getItem("SFcacheList")
      );
    },
    // 获取分页数据
    findPage: function(data) {
      if (data !== null) {
        this.loading = true;
        this.pageRequest = data.pageRequest;
      }
      this.queryBox.pageSize = this.pageRequest.pageSize;
      this.queryBox.pageNum = this.pageRequest.pageNum;
      this.$api.agent
        .investmentResources(this.queryBox)
        .then(res => {
          let content = { content: res.data, totalSize: res.total };
          this.pageResult = content;
          this.pageResult.content.forEach(item => {
              if (
                (item.province == null && item.city == null) ||
                (item.province == "null" && item.city == "null")
              ) {
                item.diqu = "";
              } else {
                item.diqu =
                  (CodeToText[item.province] == undefined
                    ? ""
                    : CodeToText[item.province]) +
                  (CodeToText[item.city] == undefined
                    ? ""
                    : CodeToText[item.city]) +
                  (CodeToText[item.area] == undefined
                    ? ""
                    : CodeToText[item.area]) +
                  (item.address == null ? "" : item.address);
              }
          item.device==1?item.deviceStr='PC':item.deviceStr='移动'
            //同步状态转义
            this.pushState_options.forEach(pushItem=>{
              if(pushItem.key==item.pushStatus){
                item.pushStatusStr=pushItem.value
              }
            })
            // 设备转义
            this.equipment_options.forEach(equipmentItem=>{
              if(equipmentItem.key==item.equipment){
                item.equipment=equipmentItem.value
              }
            })
          });
          this.loading = false;
        })
        .then(data != null ? data.callback : "");
    },
    // 加载用户角色信息
    // findUserRoles: function() {
    //   this.$api.role.findAll().then(res => {
    //     // 加载角色集合
    //     this.roles = res.data;
    //   });
    // },
    // 重置
    reset(queryBox) {
      this.loading=true
      this.$refs.queryBox.resetFields();
      this.queryBox.customerSource = "";
      this.queryBox.customerName = "";
      this.queryBox.contactPhone = "";
      this.queryBox.device = "";
      this.queryBox.pageUrl = "";
      this.queryBox.pushStatus = "";
      this.queryBox.theme = "";
      this.queryBox.diqu = "";
      this.selectedOptions = [];
      this.queryBox.province = "";
      this.queryBox.city = "";
      this.queryBox.area = "";
      this.pageRequest.pageNum = 1;
      this.queryBox.startCreateDate=''
      this.queryBox.endCreateDate=''
      this.createDate = "";
      this.findPage(null);
    },
    // 同步
    handleReceive(params) {
      this.$api.agent
        .investmentResourcesPush({
          id: params.row.id
        })
        .then(res => {
          if (res.result == 2) {
            this.$message({
              message: res.msg,
              type: "error"
            });
          } else if (res.result == 1) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.findPage(null);
          }
        });
    },
    


  },
  mounted() {
    this.findDownList();
  }
};
</script>
<style>
@import url("../../assets/queryBox.css");
</style>
<style lang="scss" scoped>
.checked-person {
  margin-top: -10%;
}
.batchdistribution-pop-tit {
  font-size: 20px;
  font-weight: bold;
  display: inline-block;
  color: #303133;
}

.el-dialog__wrapper .el-form-item__content {
  margin-left: 0;
}
.demo-form-inline {
  width: 90%;
  margin: 0 auto;
  .el-dialog__body .el-input {
    width: 93% !important;
  }
  .el-select {
    width: 100% !important;
  }
  .tit {
    display: inline-block;
    margin-top: 10%;
  }
}
.el-dialog__body {
  overflow: hidden;
}
</style>
<style lang="scss">
.batchdistribution-pop .el-dialog__header {
  padding: 0 0 0 0 !important;
}
</style>
